<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix header-box">
        <span>文章分类</span>
        <el-button type="primary" size="mini" @click="addVisible=true">添加分类</el-button>
      </div>
    <el-table
    border
      :data="tableData"
      style="width: 100%">
      <el-table-column 
      width="60"
      label="序号"
      type="index">
      </el-table-column>
      <el-table-column
        prop="cate_name"
        label="日期"
        width="400">
      </el-table-column>
      <el-table-column
      style="width: 50%"
        prop="cate_alias"
        label="姓名"
        width="400">
      </el-table-column>
      <el-table-column label="操作"
       align="center"
      >
       <template slot-scope="scope">
        <el-button
          size="mini"
          @click="getID(scope)"
          >修改</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="deleList(scope)"
          >删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    </el-card>
    <el-dialog title="添加文章分类" :visible.sync="addVisible" width="35%" @close="$refs.form.resetFields()">
      <el-form  ref="form" :model="addForm" :rules="addRules" label-width="80px">
        <el-form-item label="分类名称" prop="cate_name">
          <el-input v-model="addForm.cate_name" ></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="cate_alias">
          <el-input v-model="addForm.cate_alias" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="pushList">添 加</el-button>
      </span>
    </el-dialog>
        <el-dialog title="修改文章分类" :visible.sync="changeVisible" width="35%" @close="$refs.uform.resetFields()">
      <el-form  ref="uform" :model="changeForm" :rules="addRules" label-width="80px">
        <el-form-item label="ID" >
          <el-input v-model="changeForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="分类名称" prop="cate_name">
          <el-input v-model="changeForm.cate_name" ></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="cate_alias">
          <el-input v-model="changeForm.cate_alias" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="changeVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="changeOne">添 加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ArtCate',
  data() {
    return {
      addVisible:false,
      changeVisible:false,
      tableData: [],
      userId:'',
      addForm:{
        cate_name:'',
        cate_alias:'',
      },
      changeForm:{
        cate_name:'',
        cate_alias:'',
      },
      addRules:{
        cate_name:[ { required: true, message: '请输入分类名称', trigger: 'blur' },
        { pattern: /^\S{1,10}$/, message: '分类名必须是1-10位的非空字符', trigger: 'blur' }],
        cate_alias:[ { required: true, message: '请输入分类名称', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9]{1,15}$/, message: '分类别名必须是1-15位的字母数字', trigger: 'blur' }],
      }
    }
  },
  created(){
    this.getList()
  },
  methods:{
   async getList(){
     const {data:res} = await this.$http.get('/my/cate/list')
    //  console.log(res);
     if(res.code !==0) return this.$message.error(res.$message)
     this.$message.success(res.$message)
     this.tableData = res.data
    },
    pushList(){
    this.$refs.form.validate(async (value)=>{
    if (!value) return
    const {data:res} = await this.$http.post('/my/cate/add',this.addForm)
    this.addVisible = false
    this.$message.success(res.message)
    this.getList()
    })
   },
    changeOne(){
    this.$refs.uform.validate(async (value)=>{
    if (!value) return
    const {data:res} = await this.$http.put('/my/cate/info',this.changeForm)
    this.changeVisible = false
    this.$message.success(res.message)
    this.getList()
    })
    },
    getID(scope){
      this.changeVisible=true;
      this.changeForm ={...scope.row}
      // console.log(scope)
    },
     deleList(scope){
    this.$confirm('此操作将永久删除, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      this.$message({
        type: 'success',
        message: '删除成功!'
      });
      const {data:res} = await this.$http.delete('/my/cate/del',{params:{id:scope.row.id}})
      // console.log(scope.row.id);
      this.$message.success(res.message)
      this.getList();
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });          
    });


    }

  }
}
</script>

<style lang="less" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>


